<template>
    <div v-if="isDisp" class="footer">
        <div class="tab-item" v-for='(item,index) of tabitems' :key="index" :class='[item.title,{on:index === idx}]'
             @click="tabTap(item,index)">
            <img :src="index === idx ? item.iconSelect : item.icon">
            <!--<p :class="['colorChange',{on:index === idx}]">{{item.title}}</p>-->
            <p :style="{'color':index === idx ? color: null}">{{item.title}}</p>
        </div>
    </div>
</template>


<script type="text/javascript">

    export default {
        props: {
            tabitems: Array,
            color: String
        },
        data() {
            return {
                idx: 0,
                isDisp: true
            };
        },
        watch: {
            $route(to) {
                let isNull = null
                isNull = this.tabitems.findIndex(item => item.path === this.$route.path)
                console.log(isNull)
                if (isNull >= 0) {
                    this.isDisp = true
                }else {
                    this.isDisp = false
                }
            }
        },
        created() {
            let isNull = null
            isNull = this.tabitems.findIndex(item => item.path === this.$route.path)
            if (isNull >= 0) {
                this.isDisp = true
            }else {
                this.isDisp = false
            }
            const index = this.tabitems.findIndex(item => item.path === this.$route.path);
            this.idx = index
        },
        activated() {
            const index = this.tabitems.findIndex(item => item.path === this.$route.path);
            this.idx = index
        },
        methods: {
          tabTap: function (item,index) {
              this.idx = index
              this.$router.push({
                  path: item.path,
              })
          }
        },
        computed:{

        }
    };
</script>

<style lang="stylus" type="text/stylus" scoped>
    .footer
        display flex
        position fixed
        left 0
        bottom 0
        height 1.03rem
        width 100%
        border-top 1px #999999 solid
        padding 0.2rem 0
        line-height 0.2rem
        background-color #ffffff
        z-index 10
        .tab-item
            display flex
            justify-content space-between
            flex-direction column
            align-items center
            font-size 0.32rem
            width 25%
            text-align center
            img
                width 0.6rem
                height 0.58rem
            p
                color black

</style>
